// const { get } = require("http")

// const { get } = require("http")


// 抓取元素
const cateInp = document.querySelector('.cate')
const contentInp = document.querySelector('.content')
const pagInp = document.querySelector('.pagination')
const sortInp = document.querySelector('.sort')

// 渲染商品列表

// 所有商品
// 定义变量
let obj = {
  current : 1,
  pagesize : 10,
  total : 1,
  url:'http://localhost:8080/goodslist'
}

getGoodsList()
function getGoodsList(){
  const xhr = new XMLHttpRequest()
  xhr.open('GET',obj.url,false)
  xhr.onload = () => {
    const res = JSON.parse(xhr.responseText)
    
    return res 
  }
  xhr.send()
  // console.log(res);
  console.log(111);
  // 接受返回结果
  const res = xhr.onload()
  console.log(res);
  let listLink = res.list.slice((obj.current - 1) * obj.pagesize , obj.current * obj.pagesize)
  console.log(222);
  let str = ''
  listLink.forEach((item,index) => {
    total = Math.ceil(res.list.length/obj.pagesize)
    str += `
      <li data-title="${item.content.title}" style = "cursor: pointer;" data-src="${item.content.imageUrl}" data-price="${item.content.prePrice}" >
        <div class="goods" style="pointer-events: none;">
          <div class="goodsimg" style="pointer-events: none;">
            <img src="${item.content.imageUrl}" alt="" style="pointer-events: none;">
          </div>
          <p class="text1" style="pointer-events: none;">${item.content.title}</p>
          <p class="price" style="pointer-events: none;">￥${item.content.actualCurrentPrice}</p>
        </div>
        <div class="gouwucheimg">
          <img src="../img/gouwuche.jpg" alt="" class = "gwcimg" data-title="${item.content.title}" data-src="${item.content.imageUrl}" data-price="${item.content.prePrice}">
        </div>
        
      </li>
      `
  })
  contentInp.innerHTML = str
  console.log(333);
  pagInp.innerHTML = `
                      <li>分页</li>
                      <div>
                        <span class="left${obj.current == 1 ? ' disable' : ''}">&lt;</span>
                        <span>${obj.current}/ ${total}</span>
                        <span class="right${obj.current == total ? ' disable' : ''}">&gt;</span>
                      </div>
                     `
}

// 商品点击事件
cateInp.addEventListener('click', e => {
  e = e || window.event
  const target = e.target || e.srcElement
  if(target.nodeName !== 'LI') return
  // 类似选项卡得逻辑，点击时得颜色变化
  function aaa (){
    for( let i = 0 ; i < cateInp.children.length; i++){
      cateInp.children[i].classList.remove('active')
    }
    target.classList.add('active')
  }
  
  // 全部
  if(target.className === 'all'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/goodslist'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)
    getGoodsList()
  }
  // 宠物
  if(target.className === 'chongwu'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/chongwu'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)

  getGoodsList()
  }
  // 个人洗护
  if(target.className === 'geren'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/geren'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)

    getGoodsList()
  }
  // 数码家电
  if(target.className === 'shuma'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/shuma'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)


    getGoodsList()
  }
  // 美容
  if(target.className === 'meirong'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/meirong'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)


    getGoodsList()
  }
  // 营养套餐
  if(target.className === 'yingyang'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/yingyang'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)


    getGoodsList()
  }
  // 衣物
  if(target.className === 'yiwu'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/yiwu'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)


    getGoodsList()
  }
  // 鞋子
  if(target.className === 'xiezi'){
    aaa()
    obj.current = 1
    obj.url = 'http://localhost:8080/xiezi'
    window.sessionStorage.setItem('num',target.dataset.num)
    window.sessionStorage.setItem('sort',0)


    getGoodsList()
  }

})


function getGoodsLists(){
  const xhr = new XMLHttpRequest()
  xhr.open('GET',obj.url,false)
  xhr.onload = () => {
    const res = JSON.parse(xhr.responseText)
    
    return res 
  }
  xhr.send()
  // console.log(res);
  console.log(111);
  // 接受返回结果
  const res = xhr.onload()
  console.log(res);
  let listLink = res.slice((obj.current - 1) * obj.pagesize , obj.current * obj.pagesize)
  console.log(222);
  let str = ''
  listLink.forEach((item,index) => {
    total = Math.ceil(res.length/obj.pagesize)
    str += `
      <li data-title="${item.content.title}" style = "cursor: pointer;" data-src="${item.content.imageUrl}" data-price="${item.content.prePrice}" >
        <div class="goods" style="pointer-events: none;">
          <div class="goodsimg" style="pointer-events: none;">
            <img src="${item.content.imageUrl}" alt="" style="pointer-events: none;">
          </div>
          <p class="text1" style="pointer-events: none;">${item.content.title}</p>
          <p class="price" style="pointer-events: none;">￥${item.content.actualCurrentPrice}</p>
        </div>
        <div class="gouwucheimg">
          <img src="../img/gouwuche.jpg" alt="" class = "gwcimg" data-title="${item.content.title}" data-src="${item.content.imageUrl}" data-price="${item.content.prePrice}">
        </div>
        
      </li>
      `
  })
  contentInp.innerHTML = str
  console.log(333);
  pagInp.innerHTML = `
                      <li>分页</li>
                      <div>
                        <span class="left${obj.current == 1 ? ' disable' : ''}">&lt;</span>
                        <span>${obj.current}/ ${total}</span>
                        <span class="right${obj.current == total ? ' disable' : ''}">&gt;</span>
                      </div>
                     `
}
// 升序点击事件
sortInp.addEventListener('click', e => {
  e = e || window.Event
  const target = e.target || e.srcElement
  console.log(4444444444);
  if(target.className === 'jiang'){
    window.sessionStorage.setItem('sort',target.dataset.sort)
    console.log('来了是');
    obj.current = 1
    let num = window.sessionStorage.getItem('num')
    if( num == 1){
      obj.url = 'http://localhost:8080/sortsmallgoodslist'
      getGoodsLists()
    }
    if( num == 2){
      obj.url = 'http://localhost:8080/sortsmallchongwu'
      getGoodsLists()
    }
    if( num == 3){
      obj.url = 'http://localhost:8080/sortsmallshuma'
      getGoodsLists()
    }
    if( num == 4){
      obj.url = 'http://localhost:8080/sortsmallgeren'
      getGoodsLists()
    }
    if( num == 5){
      obj.url = 'http://localhost:8080/sortsmallmeirong'
      getGoodsLists()
    }
    if( num == 6){
      obj.url = 'http://localhost:8080/sortsmallyingyang'
      getGoodsLists()
    }
    if( num == 7){
      obj.url = 'http://localhost:8080/sortsmallyiwu'
      getGoodsLists()
    }
    if( num == 8){
      obj.url = 'http://localhost:8080/sortsmallxiezi'
      getGoodsLists()
    }
  }
  // if(target.className === 'moren'){
  //   obj.current = 1
  //   let num = window.sessionStorage.getItem('num')
  //   if( num = 1){
  //     obj.url = 'http://localhost:8080/goodslist'
  //     getGoodsList()
  //   }
  //   if( num = 2){
  //     obj.url = 'http://localhost:8080/chongwu'
  //     getGoodsList()
  //   }
  //   if( num = 3){
  //     obj.url = 'http://localhost:8080/shuma'
  //     getGoodsList()
  //   }
  // }
  
})
// 分页点击事件
pagInp.addEventListener('click', e => {
  e = e || window.Event
  const target = e.target || e.srcElement
  let sort = window.sessionStorage.getItem('sort')
  console.log(sort);
  if(target.className === 'left'){
    if( sort == 2){
      if(obj.current == 1) return
      obj.current--
      getGoodsLists()
    }else{
      if(obj.current == 1) return
      obj.current--
      getGoodsList()
    }
  }
  if(target.className === 'right'){
    if( sort == 2){
      console.log(555555555);
      if(obj.current == total) return
      obj.current++
      getGoodsLists()
    }else{
      if(obj.current == total) return
      obj.current++
      getGoodsList()
    }
  }
})



// 详情页跳转
contentInp.addEventListener('click', e => {
  e = e || window.Event
  const target = e.target || e.srcElement
  // 点击的是商品
  if(target.nodeName === 'LI') {
    console.log('点击了');
    window.localStorage.setItem('num',target.dataset.src)
    window.localStorage.setItem('title',target.dataset.title)
    window.localStorage.setItem('price',target.dataset.price)
    window.location.href = './detail.html'
    console.log('存上了');
  }
  // 加入购物车
  if(target.className === 'gwcimg'){
    console.log('点击购物车');
    // console.log(target.dataset.id);
    
    window.localStorage.setItem('gwcprice',target.dataset.price)
    window.localStorage.setItem('gwctitle',target.dataset.title)
    window.localStorage.setItem('gwcsrc',target.dataset.src)
    // window.location.href = './cart.html'
    window.alert('加入购物车成功')
    
  }
})
// 去到登录页
const login = document.querySelector('.login')
login.addEventListener('click', () => {
  window.location.href = './login.html'
})
// 去到注册页
const regist = document.querySelector('.regist')
regist.addEventListener('click', () => {
  window.location.href = './regist.html'
})
// 去到购物车页面
const cart = document.querySelector('.cartht')
cart.addEventListener('click', () => {
  window.location.href = './cart.html'
})

